<template>
  <div class="page">
    <headerbar>{{ title }}
      <span @click="add()" v-if="role" class="head-btn" slot="btn"
      ><strong>+</strong>发起</span>
    </headerbar>
    <section style="overflow: hidden;">
      <ul class="tab">
        <li @click="loadPartakeData()" :class="{ active: tabIndex == 0 }">
<!--          <i class="msg-num" v-if="count"></i>-->
          <span>待完成{{getNumber(count)}}</span>
        </li>
        <li @click="loadLaunchData()" :class="{ active: tabIndex == 1 }">
          <span>已完成</span>
        </li>
      </ul>
      <div class="select-box" v-if="tabIndex == 0">
        <div class="state-box">
          <select
            name="select"
            class="select"
            v-model="selectChange"
            @change="receive"
          >
            <option value="">全部</option>
            <option v-for="item in selectList" :value="item.key" :key="item.key">{{item.name}}</option>
          </select>
          <img src="../../../../static/images/arrow_down.png" alt="" />
        </div>
        <div class="state-box">
          <div
            name="select"
            class="select yearClass"
            @click="showTimePicker()"
          >
            <div>{{year}}年</div>
          </div>
          <img src="../../../../static/images/arrow_down.png" alt="" />
        </div>
        <div class="btn-box">
          <input
            class="select-btn"
            type="text"
            v-model="theme"
            placeholder="请输入关键字搜索"
          />
          <img src="../../../../static/images/select.png" alt="" />
        </div>
        <span @click="receive">搜索</span>
      </div>
      <div v-if="tabIndex == 0" id="partake" class="mui-active"  v-remainScroll="'sanhuiyike'">
        <div class="d-scroll list-text" style="">
          <fetchData
            v-if="isLoading"
            :loading="isLoading"
            :data="swipeData"
          ></fetchData>
          <cube-scroll
            ref="scroll"
            :options="options"
            @pulling-up="onPullingUp"
            @pulling-down="onPullingDown"
          >
            <cube-swipe  :key="newmemorabilias">
              <transition-group name="swipe" tag="div">
                <div class="" v-for="(data, index) in swipeData" :key="data.id">
                  <cube-swipe-item ref="swipeItem" :btns="data.btns" @btn-click="receiveAction" :index="index">
                    <div @click="goDetail(data)" class="item">
                      <div class="right" v-if="getInitiatorFlag(data.initiatorFlag)">本人</div>
                      <div class="name">
                        <span>主题：</span>{{ data.theme }}
                        <span
                          v-if="formatDuring(data.startTime)>3600 && getInitiatorFlag(data.initiatorFlag)"
                          class="pdl-3 color-red"
                          @click.stop="cancel(data,index)"
                        ><i class="pdh-2"></i>
                            <span class="btn-text">取消</span></span>
                        <!--                        <span class="status" :class="fontColor(data)">{{-->
                        <!--                          data.statusName-->
                        <!--                        }}</span>-->
                      </div>
                      <div><span>开始时间：</span>{{ data.startTime }}</div>
                      <div><span>地    点：</span>{{ data.address }}</div>
                      <div class="item-content-state">
                        <div class="left">
                          状    态：<span :style="getMyColor(data)">{{ getStauts(data.stateFlag) }}</span>
                        </div>
                        <div class="look-more">查看详情&nbsp;>&nbsp;></div>
                      </div>

                    </div>
                  </cube-swipe-item>
                </div>
              </transition-group>
            </cube-swipe>
            <!-- <div class="text-center no-data" v-if="!isLoading && swipeData.length===0">
              <img src="../../../../static/images/no_data.png" alt="">
              <p>暂无数据</p>
            </div> -->
            <!-- W noData -->
            <noData v-if="!isLoading && swipeData.length === 0"></noData>
            <onBottom v-else-if="onBottom"></onBottom>
          </cube-scroll>
        </div>
      </div>
      <div class="select-box" v-if="tabIndex == 1">
        <div class="state-box">
          <select
            name="select"
            class="select"
            v-model="selectChangeOne"
            @change="receiveOne"
          >
            <option value="">全部</option>
            <option value="40" >已登记</option>
            <option value="80" >已取消</option>
            <option value="90" >无效会议</option>
          </select>
          <img src="../../../../static/images/arrow_down.png" alt="" />
        </div>
        <div class="state-box">
          <div
            name="select"
            class="select yearClass"
            @click="showTimePicker()"
          >
            <div>{{year}}年</div>
          </div>
          <img src="../../../../static/images/arrow_down.png" alt="" />
        </div>
        <div class="btn-box">
          <input
            class="select-btn"
            type="text"
            v-model="themeLaunch"
            placeholder="请输入关键字搜索"
          />
          <img src="../../../../static/images/select.png" alt="" />
        </div>
        <span @click="receiveOne">搜索</span>
      </div>
      <div v-if="tabIndex == 1" id="launch" class="mui-active">
        <div class="d-scroll list-text" style="">
          <fetchData
            v-if="isLoading"
            :loading="isLoading"
            :data="launchSwipeData"
          ></fetchData>
          <cube-scroll
            ref="scroll"
            :options="launchOptions"
            @pulling-up="launchOnPullingUp"
            @pulling-down="launchOnPullingDown"
          >
            <cube-swipe :key="newmemorabilias">
              <transition-group name="swipe" tag="div">
                <div
                  class=""
                  v-for="(data, index) in launchSwipeData"
                  :key="data.id"
                >
                  <cube-swipe-item
                    ref="swipeItem"
                    :btns="data.btns"
                    @btn-click="action"
                    :index="index"
                  >
                    <div @click="goDetail(data)" class="item">
                      <div class="right" v-if="getInitiatorFlag(data.initiatorFlag)">本人</div>
                      <div class="name">
                        <span>主题：</span>{{ data.theme }}
                      </div>
                      <div><span>开始时间：</span>{{ data.startTime }}</div>
                      <div><span>地    点：</span>{{ data.address }}</div>
                      <div class="item-content-state">
                        <div class="left">
                          状    态：<span :style="getMyColor(data)">{{ getStauts(data.stateFlag) }}</span>
                        </div>
                        <div class="look-more">查看详情&nbsp;>&nbsp;></div>
                      </div>
                    </div>
                  </cube-swipe-item>
                </div>
              </transition-group>
            </cube-swipe>
            <!-- <div
              class="text-center no-data"
              v-if="!isLoading && launchSwipeData.length === 0"
            >
              <img src="../../../../static/images/no_data.png" alt="" />
              <p>暂无数据</p>
            </div> -->
            <!-- W noData -->
            <noData
              v-if="!isLoading && launchSwipeData.length === 0"
            ></noData>
            <onBottom v-else-if="onBottom"></onBottom>
            <p class="pdv-10"></p>
            <p class="pdv-3"></p>
            <!--<div v-if="role && getRole()" @click="add()" class="default-block-btn mgh-10">发起{{title}}</div>-->
          </cube-scroll>
          <!--          原发起会议-->
          <!--          <section v-if="role" class="foot-action">-->
          <!--            <div @click="add()" class="default-block-btn mgh-10">-->
          <!--              发起{{ title }}-->
          <!--            </div>-->
          <!--          </section>-->
        </div>
      </div>
    </section>
  </div>
</template>

<script>
  import tools from "@/utils/tools";
  import api from "@/common/config/api";
  import loginService from "@/service/loginService";
  import moment from "moment";
  export default {
    name: "sanhuiyike",
    data() {
      return {
        isLoading: true,
        fn: tools,
        count:0,
        options: {
          pullUpLoad: true,
          scrollbar: false,
          pullDownRefresh: {
            threshold: 90,
            stop: 0,
            txt: ' '
          },
        },
        onBottom: false, // W onBottom
        launchOptions: {
          pullUpLoad: true,
          scrollbar: false,
          pullDownRefresh: {
            threshold: 90,
            stop: 0,
            txt: ' '
          },
        },
        selectList:[],//下拉框
        getDict:[],
        objectsName: "",
        swipeData: [],
        launchSwipeData: [],
        infinite: true,
        pageIndex: 1,
        launchPageIndex: 1,
        tabIndex: 0,
        fromType: "",
        subType: "",
        title: "",
        roleData: "",
        showTypes: "1",
        newmemorabilias:'',
        selectChange:'',
        selectChangeOne:'',
        themeLaunch:'',
        theme:'',
        jlyyTime:0,
        role:false,
        year:'',
      };
    },
    beforeRouteEnter(to, from, next) {
      next((vm) => {
       /* if (from.name === "meetingMinutes") {
          setTimeout(() => {
            vm.receive()
          }, 1000)

        }*/
        if (from.name === "sanhuiyikeDetail") {
          to.meta.keepAlive = true;
          vm.$store.state.nowKeepAlive =  true;
          vm.$store.commit('addRoute','sanhuiyike')
        }
        if (from.name !== "sanhuiyikeDetail"){
          to.meta.keepAlive = false;
          vm.$store.commit("removeRoute", "sanhuiyike");
        }
      });
    },
    beforeRouteLeave(to, from, next) {
      this.$localStorage.set('sanhuiyikeIndex',this.tabIndex)
      next()
    },
    created() {
      this.reset();
      this.tabIndex = this.$localStorage.get('sanhuiyikeIndex') || 0
      this.$route.meta.keepAlive = true
      this.isPrem()
      this.fromType = this.$route.params.type;
      if (this.fromType === "shyk") {
        this.title = "三会一课";
      } else if (this.fromType === "ztdr") {
        this.title = "主题党日";
      } else if (this.fromType === "mzpy") {
        this.title = "民主评议(组织生活会)";
      }
      this.getDictValue()
      if(this.tabIndex === 1){
        this.loadLaunchData();
      }else{
        this.loadPartakeData();
      }
      this.getselectList()
    },
    methods: {
      reset(){
        this.year = moment().format('YYYY');
      },
      receive() {
        this.options.pullUpLoad = true;
        this.countNum = true;
        this.swipeData = [];
        this.tabIndex = 0
        this.pageIndex = 1;
        this.loadPartakeData();
      },
      receiveOne() {
        this.launchOptions.pullUpLoad = true;
        this.countNum = true;
        this.onBottom = false
        this.launchSwipeData = [];
        this.tabIndex = 1;
        this.launchPageIndex = 1;
        this.loadLaunchData();
      },
      goDetail(data) {
        this.$router.push({ path: `/sanhuiyikeDetail/${data.id}`, query:{fromType: this.fromType} });
      },
      fontColor(status) {
        let colorName = {
          未签到: "color-red",
          未开始: "color-tip",
          请假: "color-green",
          已参与: "color-green",
          已结束: "color-tip",
          未参加: "color-red",
        };
        return colorName[status.statusName];
      },
      showTimePicker () {
        let me = this
        if (!this.datePicker) {
          let nowYear = moment().format('YYYY');
          this.datePicker = this.$createDatePicker({
            columnCount: 1,
            min: new Date(2018,1,1),
            max: new Date(Number(nowYear),1,1),
            value: new Date(Number(nowYear),1,1),
            onSelect: (selectedTime, selectedText, formatedTime) => {
              this.year = selectedText[0];
              if(this.tabIndex === 0){
                this.receive();
              }else{
                this.receiveOne();
              }

            }
          })
        }
        this.datePicker.show()
        setTimeout(() => {
          this.datePicker.$updateProps({
            value: me._time
          })
        }, 100)
      },
      loadPartakeData() {
        if(this.tabIndex === 1 ){
          this.pageIndex = 1;
          this.swipeData = [];
          this.reset();
        }
        this.isLoading = true;
        this.onBottom = false;
        this.tabIndex = 0
          // let data = {
        //   pageNo: this.pageIndex + "",
        //   loginId: "3750",
        //   type: this.fromType,
        //   subType: this.subType,
        //   pageSize: "20",
        // };
        let data = {
          "dataYear":this.year,
          "id": "",
          "initiatorFlag": "",
          "overFlag": "0",
          "pageNo":  this.pageIndex,
          "pageSize": 20,
          "stateFlag": this.selectChange,
          "subType": this.subType,
          "theme": this.theme,
          "type": this.fromType,
          "userId": ""
        }
        loginService.meet_todoList(data).then((res) => {
          this.isLoading = false;
          if (res.code !== 0) {
            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
            return tools.tip(res.message);
          }
          this.pageIndex++;
          if (res.code === 0 && res.data.length < 1) {
            this.onBottom = true
            this.options.pullUpLoad = false
            return
          }
          // res.data.forEach((v, i) => {
          //   v.btns = [];
          //   v.btns.push({
          //     receiveAction: "receiveDeleteItem",
          //     text: "删除",
          //     color: "#ec5563",
          //   });
          // });
          this.swipeData = this.swipeData.concat(res.data);
          this.count = res.count
          setTimeout(() => {
            this.$refs.scroll.forceUpdate &&
            this.$refs.scroll.forceUpdate(true, false);
            this.options.isPullUpLoad = false;
          }, 100);
        });
      },
      receiveAction(btn, index) {
        let item = this.swipeData[index];
        this[btn.receiveAction](item, index);
      },
      receiveDeleteItem(item, index) {
        this.alertDialog(item, index, this.swipeData);
      },
      receiveDeleteItemNeW(item, index) {
        this.alertDialog(item, index, this.launchSwipeData);
      },
      isPrem() {
        let data = {
          loginId: "3750",
        };
        loginService.prem(data).then((res) => {
          if (res.code === 0) {
            this.role = true;
          } else {
            this.role = false;
          }
        });
      },
      loadLaunchData() {
        if(this.tabIndex === 0 ){
          this.launchSwipeData = []
          this.launchPageIndex = 1;
          this.reset();
        }
        this.isLoading = true;
        // if (!this.role) {
        //   return tools.alert("无权限");
        // }
        this.tabIndex = 1;
        // let data = {
        //   pageNo: this.launchPageIndex + "",
        //   loginId: "3750",
        //   type: this.fromType,
        //   subType: this.subType,
        //   pageSize: "20",
        // };
        let data = {
          "dataYear":this.year,
          "id": "",
          "initiatorFlag": "",
          "overFlag": "1",
          "pageNo":  this.launchPageIndex,
          "pageSize": 20,
          "stateFlag": this.selectChangeOne,
          "subType": this.subType,
          "theme": this.themeLaunch,
          "type": this.fromType,
          "userId": ""
        }
        loginService.meet_doneList(data).then((res) => {
          this.isLoading = false;
          // loginService.initiateList(data).then((res) => {
          if (res.code !== 0) {
            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
            return tools.tip(res.message);
          }
          this.launchPageIndex++;
          if (res.code === 0 && res.data.length < 1) {
            this.onBottom = true
            this.launchOptions.pullUpLoad = false
            return
          }
          // res.data.forEach(v => {
          //       v.btns = [{
          //         action: 'receiveDeleteItemNeW',
          //         text: '删除',
          //         color: '#ec5563'
          //       }]
          //     this.launchSwipeData.push(v)
          //   })
          this.launchSwipeData = this.launchSwipeData.concat(res.data);
          setTimeout(() => {
            this.$refs.scroll.forceUpdate &&
            this.$refs.scroll.forceUpdate(true, false);
            this.launchOptions.isPullUpLoad = false;
          }, 100);
        });
      },
      action(btn, index) {//已完成删除按钮
        let item = this.launchSwipeData[index];
        this[btn.action](item, index);
      },
      deleteItemNew(item, index) {
        console.log("-------------item.msgId={}", item);
        let params = {
          id: item.id,
        };
        // this.tools.showLoading();
        this.fetchService.meet_delete(params).then((res) => {
          this.tools.hideLoading();
          if (res.code !== 0) {
            this.newmemorabilias = Date.now();
            return this.tools.tip(res.message);
          }
          this.launchSwipeData.splice(index, 1);
          this.tools.tip("删除成功");
          this.newmemorabilias = Date.now();
        });
      },
      onPullingUp() {
        console.log("onPullingUp");
        this.loadPartakeData();
      },
      onPullingDown() {
        this.options.pullUpLoad = true
        this.onBottom = false
        this.swipeData = []
        console.log('onPullingDown')
        this.pageIndex = 1
        this.loadPartakeData()
      },
      launchOnPullingUp() {
        console.log("launchOnPullingUp");
        this.loadLaunchData();
      },
      launchOnPullingDown(){
        this.launchOptions.pullUpLoad = true;
        this.countNum = true;
        this.launchSwipeData = [];
        this.tabIndex = 1;
        this.launchPageIndex = 1;
        this.loadLaunchData();
      },
      add() {
        this.$store.state.OrgLifeAddflagType = true;
        this.$store.state.scheduleTypeSelected = [];
        this.$store.state["checkedListattendUserName"] = [];
        this.$store.state["checkedListcompereUserName"] = [];
        this.$store.state["checkedListrecordEUserName"] = [];
        delete this.$store.state.organizationalLifeAddData;//删除原来的数据
        delete this.$store.state.scheduleTypeSelected;
        this.showTypes = "1";
        this.$router.push({
          path: `/organizationalLifeAdd/add/${this.fromType}/${this.title}/${this.showTypes}`,
        });
      },
      orgLifeUpdateUndo(data,index) {
        let params = {
          // loginId: this.tools.getUserInfo().id,
          // orgLifeId: data.id,
          id: data.id,
          userId: this.tools.getUserInfo().id,
        };
        this.tools.showLoading();
        // this.fetchService.orgLifeUpdateUndo(params).then((res) => {
        this.fetchService.meet_updateUndo(params).then((res) => {
          this.tools.hideLoading();
          if (res.code !== 0) {
            return this.tools.tip(res.message);
          }
          this.tools.tip("操作成功");
          this.launchPageIndex = "1";
          this.swipeData.splice(index,1)
          this.count --
          // this.launchSwipeData = [];
          // this.loadLaunchData();

        });
      },
      cancel(data,index) {
        let me = this;
        this.$createDialog({
          type: "confirm",
          icon: "",
          title: "温馨提示",
          content: "确认取消？",
          confirmBtn: {
            text: "确定",
            active: true,
            disabled: false,
            href: "javascript:;",
          },
          cancelBtn: {
            text: "取消",
            active: false,
            disabled: false,
            href: "javascript:;",
          },
          onConfirm: () => {
            this.jlyyTime = this.formatDuring(new Date(data.startTime).getTime());
            console.log('jlyyTime=',this.jlyyTime);
            if(this.jlyyTime>3600){
              me.orgLifeUpdateUndo(data,index);
            }else{
              this.tools.tip("距离会议开始只剩一小时，无法取消会议！")
            }
          },
          onCancel: () => {},
        }).show();
      },
      getRole() {
        if (this.roleData === "zzsh") {
          this.showTypes = "1";
          return true;
        } else if (this.roleData === "dxz") {
          if (this.fromType === "shyk") {
            this.showTypes = "2";
            return true;
          } else {
            return false;
          }
        }
      },
      getDictValue () {
        let data={
          catKey:'DANG_WU_',
          treeKey:'org_life_user_state'
        }
        this.fetchService.dictValue(data).then(res => {
          console.log('this.fetchService.dictValue',res.data)
          if(res.code === 0){
            this.getDict=res.data
          }
        })
      },
      getStauts(status){
        for (let i = 0; i <this.getDict.length ; i++) {
          if(this.getDict[i].key == status){
            return this.getDict[i].value
          }
        }
        return "无"
      },
      getselectList(){
        this.selectList =[]
        this.selectList = [
          {
            "dicId":"201120155733667957",
            "typeId":"201120155506667954",
            "key":"00",
            "name":"未开始",
            "value":"未开始",
            "descp":"未开始",
          },
          {
            "dicId":"201120155733667962",
            "typeId":"201120155506667954",
            "key":"50",
            "name":"未签到",
            "value":"未签到",
            "descp":"未签到",
            "sn":6,
          },
        ]
        let data = {
          loginId: "3750",
        };
        loginService.prem(data).then((res) => {
          if (res.code === 0) {
            this.selectList.push({
              "dicId":"201120155733667960",
              "typeId":"201120155506667954",
              "key":"30",
              "name":"未登记",
              "value":"未登记",
              "descp":"未登记",
              "sn":4,
            })
          }
        });
      },
      getMyColor(data) {
        // 获取颜色
        let myColor = {
          //默认颜色/api-user/userExt/party/birthday/
          color: "#DE8D00",
        };
        if ("00" == data.stateFlag) {
          myColor.color = "#DE8D00";
        } else if ("10" == data.stateFlag) {
          myColor.color = "#DE8F08";
        } else if ("20" == data.stateFlag) {
          myColor.color = "#DE8F08";
        } else if ("30" == data.stateFlag) {
          myColor.color = "#DE8F08";
        } else if ("40" == data.stateFlag) {
          myColor.color = "#0FD59D";
        } else if ("50" == data.stateFlag) {
          myColor.color = "#E20001";
        } else if ("60" == data.stateFlag) {
          myColor.color = "#DE8F08";
        } else if ("70" == data.stateFlag) {
          myColor.color = "#DE8F08";
        } else if ("80" == data.stateFlag) {
          myColor.color = "#DE8F08";
        }
        return myColor;
      },
      alertDialog(item, index, data) {
        let _this = this;
        this.$createDialog({
          type: "confirm",
          icon: "",
          title: "温馨提示",
          content: "确定删除当前会议？",
          confirmBtn: {
            text: "确定",
            active: true,
            disabled: false,
            href: "javascript:;",
          },
          cancelBtn: {
            text: "取消",
            active: false,
            disabled: false,
            href: "javascript:;",
          },
          onConfirm: () => {
            _this.deleteItem(item, index, data);
          },
          onCancel: () => {},
        }).show();
      },
      deleteItem(item, index, data) {
        console.log("-------------item.msgId={}", item);
        let params = {
          id: item.id,
        };
        // this.tools.showLoading();
        this.fetchService.meet_delete(params).then((res) => {
          this.tools.hideLoading();
          if (res.code !== 0) {
            this.newmemorabilias = Date.now();
            return this.tools.tip(res.message);
          }
          data.splice(index, 1);
          this.tools.tip("删除成功");
          this.newmemorabilias = Date.now();
        });
      },
      getInitiatorFlag(initiatorFlag){
        if(initiatorFlag == '2' || initiatorFlag =='1'){
          return true
        }else if (initiatorFlag =='0'){
          return false
        }
      },
      //计算当前时间到目标时间的时间差（s） 目标时间-当前时间
      formatDuring(time2) {
        // let time1 = new Date().getTime()
        // let seconds = parseInt((new Date(time2).getTime()-time1) / 1000); // 得到秒数
        return tools.formatDataUtil(new Date(),time2,'s');
      },
      getNumber(count){
        if(count>0){
          return '('+count+')'
        }
        return ''
      },
    },
  };
</script>

<style scoped lang="scss">
  @import "@/common/stylus/moon.scss";
  .list-text .item {
    font-size: $defaultFontSize;
    .name {
      font-weight: bolder;
      padding-bottom: 10px;
      width: 80%;
    }
    .right{
      width: 1.3rem;
      float: right;
      align-content: center;
      position: absolute;
      right: 0px;
      background: #2364B2;
      text-align: right;
      padding-right: 2%;
      color: #ffffff;
      border-radius: 10PX 0px 0px 10PX;
    }
    .color-red{
      position: absolute;
      right: 16%;
    }
    span {
      font-weight: inherit;
      font-size: inherit;
    }
  }
  .tab li.active span {
    background: #fff;
    display: inline-block;
    color: #e20001;
    text-align: center;
    border-radius: .10667rem;
    font-weight: bold;
    font-size: 16PX;
  }
  .head-btn{
    font-size: 14PX;
    >strong{
      font-size: 18PX;
      margin-right: 3px;
    }
  }
  .tab{
    margin-bottom: .16667rem;
  }
  .cube-swipe-item{
    margin: 0.2rem;
    .item{
      border-radius: 0.2rem;
      .item-content-state{
        display: flex;
        justify-content: space-between;
        .left{
          max-width: 60%;
        }
        .look-more{
        }
      }
    }
  }
  .live-msg-wrap {
    .card-foot {
      font-size: $titleFontSize;
      padding-right: 0;
      padding-bottom: 0;
      .btn-text {
        white-space: nowrap;
        border-radius: pxToRem(10px);
        line-height: pxToRem(44px);
        padding: 0 pxToRem(10px);
        font-weight: 400;
        text-align: center;
        border: 1px solid $theme-color;
      }
    }
  }
  /*.msg-num{
    background: #e20001;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    display: block;
    position: absolute;
    padding: 0 0.06667rem;
    white-space: nowrap;
    left: 27%;
    top: 11%;
    -webkit-transform: translate3d(0.53333rem, -1.06667rem, 0);
    transform: translate3d(0.53333rem, -1.06667rem, 0);
     min-width: .53333rem;
     height: .53333rem;
    font-size: 12PX;
    font-style: normal;
  }*/
  .select-box {
    width: 100%;
    height: 90px;
    background: #ffffff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 2%;
    .state-box {
      position: relative;
      img {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 16px;
        width: 20px;
      }
      .select {
        width: 2rem;
        height: 50px;
        line-height: 50px !important;
        padding-top: 0;
        padding-bottom: 0;
        margin-bottom: 0;
        background: #ffffff;
        border: 1px solid #9a9a9a !important;
        border-radius: 10px;

      }
      .yearClass{
        display: flex;
        align-items: center;
        padding-left: 8%;
        font-size: 14PX;
        font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif, 'Droid Sans Fallback';
       }
    }
    .btn-box {
      position: relative;
      width: 44%;
      .select-btn {
        width: 100%;
        height: 50px;
        background: #ffffff;
        border: 1px solid #9a9a9a;
        border-radius: 10px;
        margin-bottom: 0;
        padding: 10px 10px 10px 50px;
      }
      img {
        position: absolute;
        width: 25px;
        top: 50%;
        transform: translateY(-50%);
        left: 15px;
      }
    }

    span {
      font-size: 14PX;
      color: #e20002;
    }
  }
  .d-scroll{
    height: calc(100vh - 3.1rem - .66667rem);
  }
</style>
